Component Composition

Firat Atalay

4 min read

·

Mar 1, 2024

9

As we keep learning about components in this section there is one essential principle that we really need to focus on now, which is component composition.

Now, in order to talk about component composition, we first need to take a look at what happens when we simply use or include a component in another component in JSX. So let’s say that we have this model component that we want to reuse, and also this success component which simply renders the message well done. And then we just use the success component inside the modal component like this.

And this sort of thing is exactly what we have been doing with our components most of the time, right? So we just use them inside of other components. However, when it comes to re-usability this creates a big problem. That’s because right now the success component really is inside of modal.

They’re deeply linked together in the JSX right now, and therefore we cannot reuse this modal component to display some other message inside of it, for example, an error message. But as you can imagine, in order to solve this, we now bring in the technique of component composition where we can compose the model and success components together.

So here we have our modal component again, but with a fundamental difference. So this component does not include a predefined component but instead it accepts children with the children prop. So just like we have learned before, so if we get our success component again, we can now basically just pass it into the modal by placing it between the opening and closing tags when we use modal.

So in the first example, the success component is really tied to the model. And so that model might as well be called a success model because we can’t use it for anything else anymore. But with component composition, we simply passed the success component right into the model and composed them together in this way. And again, this works thanks to the children prop.

Now, of course, we could have passed in any other component which makes the model component highly reusable. So essentially when we do component composition, we leave this hole or this empty slot in the component ready to be filled with any other component that we want.

So let’s say that later we needed another model window somewhere else in the app, but one that renders this error message. Well, that’s pretty easy now. We just used the model component again but this time we pass in the error component as a children. And with this, we have also successfully composed these two components together as well.

So formally component composition is the technique of combining different components by using the children prop or by explicitly defining components as props.

Now we use composition for two big reasons or in two important situations :

- First, when we want to create highly reusable and flexible components such as the modal window or really a million other reusable components that we can think of. And we do this really all the time.

- Now, the second situation in which we can use composition is in order to fix a prop drilling problem. And this is actually great for creating layouts.

Just keep in mind once again that this is only possible because components do not need to know their children in advance which allows us to leave these empty slots inside of them in the form of the children prop.